<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Title</title>
    <link rel="stylesheet" href="/layui/css/layui.css"/>
</head>
<body>
<script src="/layui/layui.js"></script>

<div class="layui-inline"> <!-- 注意：这一层元素并不是必须的 -->
    <input type="text" class="layui-input" id="test1">
</div>

<div class="layui-inline"> <!-- 注意：这一层元素并不是必须的 -->
    <input type="text" class="layui-input" id="test2">
</div>

<div class="layui-inline"> <!-- 注意：这一层元素并不是必须的 -->
    <input type="text" class="layui-input" id="test3">
</div>

<div class="layui-inline"> <!-- 注意：这一层元素并不是必须的 -->
    <input type="text" class="layui-input" id="test4">
</div>

<div class="layui-inline"> <!-- 注意：这一层元素并不是必须的 -->
    <input type="text" class="layui-input" id="test5">
</div>

<script>
    layui.use('laydate', function(){
        var laydate = layui.laydate;

        //执行一个laydate实例
        laydate.render({
            elem:'#test1',
            type:'year'
        })
        laydate.render({
            elem:'#test2',
            type:'month'
        })
        laydate.render({
            elem:'#test3',
            type:'datetime',
            range:'-',
            format:'yyyy-MM-dd HH:mm:ss',
            min:-30,
            max:30
        })
        laydate.render({
            elem:'#test4',
            type:'time',
            format:'HH时mm分mm秒',
            show:true
        })

        laydate.render({
            elem:'#test5',
            theme:'#393D49',
            calendar:true
        });


        //标注重要日子
        var ins1 = laydate.render({
            elem: '#test'
            ,mark: {
                '0-10-03': '生日'
                ,'0-12-31': '跨年' //每年12月31日
                ,'0-0-15': '工资' //每个月15号
                ,'2017-8-15': '' //具体日期
                ,'2017-8-20': '预发' //如果为空字符，则默认显示数字+徽章
                ,'2017-8-21': '发布'
            }
            ,done: function(value, date){
                if(date.year === 2017 && date.month === 8 && date.date === 15){ //点击2017年8月15日，弹出提示语
                    ins1.hint('中国人民抗日战争胜利72周年');
                }
            }
        });
    });
</script>

</body>
</html>